<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title  class="systemName"></title>
    <base id="base" href="/">
    <link rel="stylesheet" href="css/common/bootstrap.min.css">
    <link rel="stylesheet" href="css/common/public.css">
    <link rel="stylesheet" href="plugin/bootstrap-table-master/bootstrap-table.min.css">
</head>
<body class="gray-bg">
<div id="app" v-cloak>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>系统用户</h5>
                        <div class="ibox-tools"></div>
                    </div>
                    <div class="ibox-content">
                        <div class="row row-lg search">
                            <div class="row">
                                <div class="col-sm-2">
                                    <label class="col-sm-4">用户名</label>
                                    <div class="col-sm-7">
                                        <input type="text" v-model="username" class="form-control" @keyup.enter="search">
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <label class="col-sm-4">真实姓名</label>
                                    <div class="col-sm-7">
                                        <input type="text" v-model="realName" class="form-control" @keyup.enter="search">
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <label class="col-sm-4">手机号</label>
                                    <div class="col-sm-7">
                                        <input type="text" v-model="cellphone" class="form-control" @keyup.enter="search">
                                    </div>
                                </div>
                                <div class="col-sm-1">
                                    <button type="button" class="btn btn-info" @click="search">
                                        <span class="glyphicon glyphicon-search"></span> 搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="row row-lg">
                            <div class="col-sm-12">
                                <!--toolbar-->
                                <div id="toolbar" class="btn-group m-t-sm">
                                    <button data-check-permission="sys:user:add" type="button" class="btn btn-outline btn-default" @click="add">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;新增
                                    </button>
                                    <button data-check-permission="sys:user:edit" type="button" class="btn btn-outline btn-default" @click="edit">
                                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;修改
                                    </button>
                                    <button data-check-permission="sys:user:delete" type="button" class="btn btn-outline btn-default" @click="del">
                                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>&nbsp;删除
                                    </button>
                                    <button data-check-permission="sys:user:forbid" class="btn btn-outline btn-default" type="button" @click="forbid">
                                        <span class="fa fa-pause">&nbsp;禁用</span>
                                    </button>
                                    <button data-check-permission="sys:user:enable" class="btn btn-outline btn-default" type="button" @click="enable">
                                        <span class="fa fa-play">&nbsp;启用</span>
                                    </button>
                                    <button data-check-permission="sys:user:pwd:reset" class="btn btn-outline btn-default" type="button" @click="resetPwd">
                                        <span class="fa fa-key">&nbsp;重置密码</span>
                                    </button>
                                </div>
                                <!--bootstrapTable-->
                                <table id="tbSysUser"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--用户编辑-->
    <div class="ibox-content"  id="userCreateOrUpdate" v-show="isShowUserForm">
        <form class="form-horizontal" id="userForm" style="margin-top: 5px;">
            <!--用户ID-->
            <input type="hidden" name="id" id="id"/>
            <div class="form-group">
                <div class="col-sm-2 control-label">用户名</div>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="username" id="username" placeholder="登录账号"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">密码</div>
                <div class="col-sm-8">
                    <input type="password" class="form-control" name="password" id="password" placeholder="密码"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">真实姓名</div>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="realName" id="realName" placeholder="密码"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">邮箱</div>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="email" placeholder="邮箱"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">手机号</div>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="cellphone" placeholder="手机号"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">角色</div>
                <div class="col-sm-8" id="roleList" v-html="roleCheckboxHtml"></div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">状态</div>
                <div class="col-sm-8">
                    <label class="radio-inline">
                        <input type="radio" name="status" value="0"  checked="checked"/> 正常
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="status" value="1"/> 禁用
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">备注</label>
                <div class="col-sm-8">
                             <textarea class="form-control" rows="4" name="remark"
                                       placeholder="请输入备注消息..." style="height: 100px; width: 100%;"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-10" style="text-align: center;">
                    <input type="button" class="btn btn-primary" @click="save" value="保存"/>
                </div>
            </div>
        </form>
    </div>

    <!-- 重置密码 -->
    <div class="ibox-content" id="passwordLayer" v-show="isShowPwdLayer">
        <div class="row" style="margin-top: 5px;">
            <div class="col-md-12">
                <form class="form-horizontal" id="resetPwd">
                    <div class="form-group">
                        <div class="col-sm-3 control-label">新密码：</div>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" name="newPassword" id="newPassword" placeholder="请输入新密码"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12" style="text-align: center;">
                            <input type="button" class="btn btn-primary" @click="updatePwd" value="重置密码"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 全局js -->
<script type="text/javascript" src="js/common/public.js"></script>
<!-- Bootstrap table -->
<script src="plugin/bootstrap-table-master/bootstrap-table.min.js"></script>
<script src="plugin/bootstrap-table-master/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="js/modules/sys/user.info.js"></script>
</html>